<template>
  <div>
    <div class="title" style="font-size: 30px; padding-bottom: 20px">
      <h1>/项目一些功能的实现代码/</h1>
      <el-divider content-position="right">-- --</el-divider>
    </div>
    <div class="content">
      <span>
        <h2>一、跳转到首页按钮功能实现（在Main.vue里）</h2>
        <el-divider></el-divider>
        <span><img src="../../src/assets/image/learn3-1.png" alt=""></span>
      </span>
      <span>
        <h2>二、跳转到顶部按钮功能实现（在Main.vue里）</h2>
        <el-divider></el-divider>
        <span><img src="../../src/assets/image/learn3-2.png" alt=""></span>
      </span>
      <span>
        <el-divider></el-divider>
        <h2>三、文章内容目录跳转（在learn2.vue里）与网址跳转</h2>
        <el-divider></el-divider>
        <h3>1.在需要跳转的段落定位加id</h3>
        <span><img src="../../src/assets/image/learn3-3.png" alt=""></span>
        <h3>2.使用el-link文字跳转链接，定位跳转到对应的段落（这里，网址跳转只需要这段，在href里写入网址即可）</h3>
        <span><img src="../../src/assets/image/learn3-4.png" alt=""></span>
        <h3>3.注：使用a标签也可以跳转（就是文字没有样式）</h3>
        <span><img src="../../src/assets/image/learn3-5.png" alt=""></span>
        <h3>4.上面的方法虽然可以跳转到指定段落，但是刷新页面会变成空白页，这是个bug,我还没解决。</h3>
      </span>
      <span>
        <el-divider></el-divider>
        <h2>四、上面三个内容中有三个跳转容易混淆</h2>
        <el-divider></el-divider>
        <h3>1.其中本页内容段落跳转与网址跳转都用el-link加href跳转</h3>
        <h3>2.而页面跳转是router-link加to跳转</h3>
        <h3>3.因为我在learn2里做文字型页面跳转的时候用错了el-link加href,应该是router-link加to</h3>
        <span><img src="../../src/assets/image/learn3-7.png" alt="">注：错误用法</span>
        <span><img src="../../src/assets/image/learn3-6.png" alt="">注：正确用法</span>
      </span>
    </div>
  </div>
</template>
<style lang="less" scoped>
.content {
  text-align: left;
  h2 {
    font-size: 25px;
  }
  h3,
  h4 {
    font-size: 20px;
    margin: 10px 0;
  }
  h5 {
    font-size: 17px;
    margin: 10px 0;
  }
}
</style>

<script>
export default {
  name: "vueLearn3", //与路由router里配置的name一样
  data() {
      
    return {
    };
  },
};
</script>